<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>showImages</title>
</head>

<body>
  <div class="container">
    <label>请选择一个图像文件：</label>
    <button id="select">(重新)选择图片</button>
    <button id="add">(追加)图片</button>
    <input type="file" id="file_input" multiple />
  </div>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">


    window.onload = function () {
      var input = document.getElementById("file_input");
      var result;
      var dataArr = []; // 储存所选图片的结果(文件名和base64数据)
      var fd;  //FormData方式发送请求
      var oSelect = document.getElementById("select");
      var oAdd = document.getElementById("add");
      var oSubmit = document.getElementById("submit");
      var oInput = document.getElementById("file_input");

      if (typeof FileReader === 'undefined') {
        alert("你的浏览器版本过低，请先升级版本");
      }

      function readFile() {
        var iLen = this.files.length;
        for (var i = 0; i < iLen; i++) {
          var reader = new FileReader();
          reader.readAsDataURL(this.files[i]);
          reader.fileName = this.files[i].name;

          reader.onload = function (e) {
            var imgMsg = {
              name: this.fileName,//获取文件名
              base64: this.result   //reader.readAsDataURL方法执行完后，base64数据储存在reader.result里
            }
            dataArr.push(imgMsg);
            result = '<div class="delete">delete</div><div class="result"><img class="subPic" src="' + this.result + '" alt="' + this.fileName + '"/></div>';
            var div = document.createElement('div');
            div.innerHTML = result;
            div['className'] = 'float';
            document.getElementsByTagName('body')[0].appendChild(div);  　　//插入dom树
            var img = div.getElementsByTagName('img')[0];
            img.onload = function () {
              var nowHeight = ReSizePic(this); //设置图片大小
              this.parentNode.style.display = 'block';
              var oParent = this.parentNode;
              if (nowHeight) {
                oParent.style.paddingTop = (oParent.offsetHeight - nowHeight) / 2 + 'px';
              }
            }
            div.onclick = function () {
              $(this).remove();                  // 在页面中删除该图片元素
            }
          }
        }
      }


      function send() {
        var submitArr = [];
        $('.subPic').each(function () {
          submitArr.push({
            name: $(this).attr('alt'),
            base64: $(this).attr('src')
          });
        }
        );

        console.log(submitArr);

        $.ajax({
          url: '{:U(\'uploadPicBase64\')}',
          type: 'post',
          data: { 'imgbase64arr': submitArr },

          dataType: 'json',
          //processData: false,   用FormData传fd时需有这两项
          //contentType: false,
          success: function (data) {
            console.log('返回的数据：' + JSON.stringify(data))
          }
        })




      }




      oSelect.onclick = function () {
        oInput.value = "";   // 先将oInput值清空，否则选择图片与上次相同时change事件不会触发
        //清空已选图片
        $('.float').remove();
        oInput.click();
      }


      oAdd.onclick = function () {
        oInput.value = "";   // 先将oInput值清空，否则选择图片与上次相同时change事件不会触发
        oInput.click();
      }


      oSubmit.onclick = function () {
        if (!dataArr.length) {
          return alert('请先选择文件');
        }
        send();
      }
    }


  </script>
</body>

</html>